<!DOCTYPE html>
<html>

<head>
    <title>右键菜单实现</title>

    <style>
        .seleul {
            display: none;
            box-shadow: 0px 0px 5px #f4979a;
            text-align: center;
            width: 160px;
            height: 205px;
            position: absolute;
            margin: 0;
            padding: 0;
        }

        .seleli {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            list-style: none;
            border: 1px solid #eee;
        }

        .highsele {
            background-color: #f4979a;
        }
    </style>
</head>

<body>
    <input type="text">
    <button>111</button>




</body>
<div>
    <ul id='selelist' class='seleul' unselectable='on' onselectstart='return false;' style='-moz-user-select:none;z-index: 9999;'>
        <li class='seleli' onmouseover='over(this)' onmouseleave='leave(this)' onclick='getlocal()'>获取定位</li>
        <li class='seleli' onmouseover='over(this)' onmouseleave='leave(this)' onclick='gettext()'>获取名称</li>
        <li class='seleli' onmouseover='over(this)' onmouseleave='leave(this)' onclick='highlight()'>设置高亮</li>
        <li class='seleli' onmouseover='over(this)' onmouseleave='leave(this)'  onclick='nohighlight()'>取消高亮</li>
    </ul>
</div>
<script type="text/javascript">
   var ele = '';
    function over(x) {
        x.style.backgroundColor = "RGB(240,255,240,0.5)";
    };

    function leave(x) {
        x.style.backgroundColor = "";
    };
    function getlocal() {
        res = {};
        var id = ele.id;
        if (id != "") {
            res['type'] = "id";
            res['num'] = 1;
            res['val'] = id;
            res['index'] = 0;

            console.log(res);
         
            return res;
        }
        var name = ele.name;
        if (name != "") {
            l = document.getElementsByName(name);
            if (l.length == 1) {;
                res['type'] = "name";
                res['num'] = 1;
                res['val'] = name;
                res['index'] = 0;
                console.log(res);
                return res;

            } else {
                if (l.length != 0) {
                    for (var i = 0; i < l.length; i++) {
                        if (l[i] == ele) {
                            res['type'] = "name";
                            res['num'] = l.length;
                            res['val'] = name;
                            res['index'] = i;
                            console.log(res);
                            return res;
                        }

                    }
                }
            }

        }

        var name = ele.className;

        if (name != "") {
            l = document.getElementsByClassName(name);
            if (l.length == 1) {
                res['type'] = "class";
                res['num'] = 1;
                res['val'] = name;
                res['index'] = 0;
                console.log(res);
                return res;

            } else {
                if (l.length != 0) {
                    for (var i = 0; i < l.length; i++) {
                        if (l[i] == ele) {
                            res['type'] = "class";
                            res['num'] = l.length;
                            res['val'] = name;
                            res['index'] = i;
                            console.log(res);
                            return res;
                        }

                    }
                }
            }

        }
        var name = ele.tagName;
        if (name != "") {
            l = document.getElementsByTagName(name);
            if (l.length == 1) {
                res['type'] = "tag";
                res['num'] = 1;
                res['val'] = name;
                res['index'] = 0;
                console.log(res);
                return res;

            } else {
                if (l.length != 0) {
                    for (var i = 0; i < l.length; i++) {
                        if (l[i] == ele) {
                            res['type'] = "tag";
                            res['num'] = l.length;
                            res['val'] = name;
                            res['index'] = i;
                            console.log(res);
                            return res;
                        }

                    }
                }
            }

        }
        alert('无法识别');



    };
    function highlight() {
        ele.classList.add("highsele");
    };
    function nohighlight() {
        ele.classList.remove("highsele");
    };
    function gettext() {
        t = ele.tagName;

        if (t == 'INPUT') {
            var ee2 = ele;

            while (true) {
                if (ee2.tagName == "BODY" || ee2.tagName == "HTML") {
                    console.log("定位失败");
                    return "定位失败";
                }
                var ee3 = ee2.parentElement;

                if (ee3.innerText != "") {
                    var ee4 = ee2.previousElementSibling;

                    if (ee4 != null && ee4.innerText != "") {
                        console.log(ee4.innerText);
                        return ee4.innerText;
                    } else {
                        ee4 = ee2.nextElementSibling;
                        if (ee4 != null && ee4.innerText != "") {
                            console.log(ee4.innerText);
                            return ee4.innerText;
                        } else {

                            console.log(ee3.innerText);
                            return ee3.innerText;
                        }

                    }
                } else {
                    ee2 = ee3;
                }
            }



        } else {
            var t=ele.innerText;
            if (typeof(exp) == 'undefined'){
            console.log('无法获取名称');
            return '无法获取名称';
            }
            console.log(t);
            return t;
        }
    };
    
    document.oncontextmenu = function (ev) {
        var el = document.getElementById('selelist'); 
        var ev = ev || event; 
        ev.preventDefault();
        ele = ev.toElement;
        var x = ev.pageX;
        var y = ev.pageY;
        el.style.display = 'block';
        el.style.left = x + 'px';
        el.style.top = y + 'px';
        document.onclick = function () {  
            el.style.display = 'none';
        }
    }

</script>